<template>
  <div>
    <div class="main">
      <div class="tou">
        <img src="../../assets/tou.png" alt />
        <div class="tou-hander">
          <div>昵称</div>
          <div>我的积分：</div>
        </div>
      </div>
    </div>
    <div class="order-name-wrap">
      <div class="order-name">全部订单</div>
      <div class="show-order">查看全部订单</div>
    </div>
    <div class="order-status-wrap">
      <div class="item">
        <div class="icon wait"></div>
        <div class="text">待支付</div>
      </div>
      <div class="item">
        <div class="icon take"></div>
        <div class="text">待收货</div>
      </div>
      <div class="item">
        <div class="icon comment"></div>
        <div class="text">待评价</div>
      </div>
    </div>
    <div class="menu-list-wrap">
      <ul>
        <li>个人资料</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>收货地址</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>绑定手机</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>修改密码</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <ul>
        <li>我的收藏</li>
        <li class="iconfont icon-jiantou"></li>
      </ul>
      <div class="btn" @click="goBefore">退出</div>
    </div>
  </div>
</template>
<script>
// import headers from '../../components/Headers'

export default {
  methods: {
    goBefore () {
      this.$router.push({path:'/'})
        sessionStorage.removeItem("token")
    }
  }
}
</script>
<style lang="scss" scope>
.main {
  background: red;
  margin-top: 5rem;
  height: 13rem;
}
.tou {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tou img {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  margin-top: 5rem;
  margin-left: 1rem;
}
.tou-hander {
  margin-right: 23rem;
  margin-top: 6rem;
  font-size: 0.9rem;
  color: white;
}
.order-name-wrap {
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.order-status-wrap {
  height: 6.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-list-wrap {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
.menu-list-wrap ul {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
// .btn {
//   display: flex;
//   width: 75%;
//   height: 5rem;
//   background: red;
//   margin: 0 auto;
//   margin-top: 3.8rem;
//   // text-align: center;
//   align-items: center;
//   justify-content: center;
//   border-radius: 1rem;
// }
</style>
